<template>
<div class="brandSettings">
  <el-form ref="form" :rules="rules" :model="form" label-width="80px">
    <el-form-item label="系统名称" prop="name">
      <el-input placeholder="请输入系统名称" v-model="form.name"   maxlength="6" show-word-limit style="width: 250px;"></el-input>
      <el-popover
        placement="top-start"
        width="740"
        trigger="hover">
        <div class="content"><img src="@/assets/images/brandSettings.png"/></div>
        <span slot="reference" class="example">示例</span>
      </el-popover>

    </el-form-item>
    <el-form-item label="系统logo" prop="name">
      <ImageUpload v-model="form.src" :limit='1' type='small' :isShowTip='false' />
      <div class="tips-content">
        尺寸：308*56px，支持jpg，jpeg，png，GIF等图片格式，大小2M内
      </div>
    </el-form-item>
  </el-form>
   <el-button v-hasPermi="['system:brand:save']" type="primary" size="small" class="save">保存</el-button>
</div>
</template>
<script>
export default {
  name: "brandSettings",
  data(){
    return{
      form: {
        name: null,//系统名称
        src:'',//图片
      },
      rules: {
        'msg': [
          { required: true, message: '请输入驳回的原因', trigger: 'change' }
        ]
      }
    }
  },
}
</script>

<style scoped lang="scss">
.brandSettings {
  padding: 16px;
  background: #fff;
  height: calc(100% - 40px);
  margin: 20px;
  border-radius: 4px;
  padding-left: 300px;
}
.tips-content {
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
}
.save {
  margin-left:80px;
}
.example {
  margin-left: 10px;
  color: #3070ff;
  cursor: pointer;
}
.content {
  img {
    width: 700px;
    height: auto;
  }
}
</style>
